//import 导入 意为 '导入 模块儿 从 react 模块儿导入'
import React,{ Component } from 'react';
import {
    AppRegistry, // 注册APP入口
    StyleSheet, //样式表组件
    Image, //添加Image组件
    TextInput,
    TouchableHighlight, //触摸高亮效果
    TouchableOpacity, //触摸透明效果
    TabBarIOS,//引入TabBarIOS组件
    Text, //文字组件,它里面只能放文字 类似于 span 标签
    View //结构组件,它类似于 div 标签
} from 'react-native';

/*TabBarIOS 组件
该组件提供一个Tab切换功能，可以切换不同的页面，他有一个附属组件TabBarIOS.Item
组件属性：
barTintColor: Tab 栏的背景颜色
tintColor: 当我们选中了某一个Tab时，该Tab的图标颜色
translucent: Tab 栏是否透明

TabBarIOS.Item 属性

badge : 红色的提示数字，可以用于消息提醒
icon : Tab的图标，如果不指定，默认显示系统图标
onPress： 点击事件，当某个Tab被选中时，需要改变组件的selected={true}设置。
selected：是否选中某个Tab，如果其值为true，则选中并且显示子组件。
selectedIcon：选中状态的图标，如果为空，则将图标变为蓝色。
systemIcon: 系统图标，其值是枚举类型，可选值有‘bookmarks’，‘contacts’，‘downloads’，‘favorites’，‘featured’，‘history’，‘more’，‘most-recent’，‘most-viewed’，‘recents’，‘search’和‘top-rated’。

title：标题。他会出现在图标底部，当我们书用了系统图标时，将会忽略该标题。*/

//创建一个 MyApp 组件
class MyApp extends Component{
    constructor(){
        super();
        this.state={
            flag:'home'
        }
    }

    changeState(val){
        this.setState({
            flag:val
        })
    }

    render(){
        return(
            <TabBarIOS>
            <TabBarIOS.Item
        icon={require('./img/home.png')}
        title='主页'
        selected={this.state.flag=='home'}
        onPress={this.changeState.bind(this,'home')}
    >
    <View style={styles.wp}>
    <Text style={styles.txt}>芙蓉帐暖度春宵</Text>
        </View>

        </TabBarIOS.Item>


        <TabBarIOS.Item
        icon={require('./img/movie.png')}
        title='电影'
        selected={this.state.flag=='movie'}
        onPress={this.changeState.bind(this,'movie')}
    >
    <View style={styles.wp}>
    <Text style={styles.txt}>少小离家老大回</Text>
        </View>

        </TabBarIOS.Item>

        <TabBarIOS.Item
        icon={require('./img/music.png')}
        title='音乐'
        selected={this.state.flag=='music'}
        onPress={this.changeState.bind(this,'music')}
    >
    <View style={styles.wp}>
    <Text style={styles.txt}>匏土革木石金</Text>
        </View>

        </TabBarIOS.Item>


        <TabBarIOS.Item
        icon={require('./img/read.png')}
        title='阅读'
        selected={this.state.flag=='read'}
        onPress={this.changeState.bind(this,'read')}
    >
    <View style={styles.wp}>
    <Text style={styles.txt}>书中自有颜如玉</Text>
        </View>

        </TabBarIOS.Item>
        </TabBarIOS>

    );
    }

}





//设置样式
const styles = StyleSheet.create({
    wp:{
        marginTop:40,
        paddingLeft:40
    },
    txt:{
        color:'#f00',
        fontSize:20
    }
});


//注册app,其中 'myapp'是指工程名,'MyApp'是创建的组件名
AppRegistry.registerComponent('myapp', () => MyApp);